<template>
	<view class="record-packbox relative">
		<view class="record-list relative" v-for="(item, index) in resLists" :key="index" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
			:style="{'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/infinite/record-list.png)`}">
			<view class="sort-box absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:style="{'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/infinite/record-sort.png)`}">
				{{ item.sort }}
			</view>
		
			<view class="record-info flex-align-items-center">
				<view class="image-view">
					<image :src="item.avatar" class="image-avatar" mode="aspectFill" />
				</view>

				<view class="info-item">
					<view class="info-item-name truncate">{{ item.nickname }}</view>
					<view class="info-item-time">{{ item.create_time }}</view>
				</view>
				
				<!-- 奖品类型: 1赏品 2优惠券 3机能 -->
				<view v-if="item.reward_item_name" class="info-desc">
					<view class="reward-title truncate">{{ item.reward_item_name }}
						<text v-if="item.type === 3" style="color: #63FFF7;">*{{ item.num }}</text>
					</view>
					<view class="desc truncate" v-if="item.type === 1">¥{{ item.recovery_price }}</view>
					<view class="desc truncate" v-if="item.type === 2">{{ item.subtitile }}</view>
				</view>
				
				<view class="reward-cover flex-all-center" v-if="item.type === 2 && item.mini_cover">
					<image :src="item.mini_cover" :class="['reward-mini-cover', item.type === 3 ? 'reward-cover-balanch' : '']" mode="heightFix" />
				</view>
				<view class="reward-cover flex-all-center" v-if="item.type !== 2 && item.reward_item_cover">
					<image :src="item.reward_item_cover" :class="['reward-mini-cover', item.type === 3 ? 'reward-cover-balanch' : '']" mode="" />
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'comHouseRecord',
		props: {
			resLists: Array
		},
		data() {
			return {};
		},
		computed:{
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
	};
</script>

<style lang="scss" scoped>
	.record-packbox {
		.record-list {
			width: 686rpx;
			height: 144rpx;
			background-size: 100% 100%;
			margin: 20rpx auto;

			.sort-box {
				font-size: 20rpx;
				color: #FFF;
				width: 126rpx;
				height: 24rpx;
				top: 0rpx;
				left: 0rpx;
				padding-left: 12rpx;
				background-size: 100% 100%;
				text-align: center;
			}

			.record-info {
				width: 100%;
				height: 144rpx;
				padding: 0 0rpx 0 40rpx;

				.image-view {
					margin-right: 16rpx;
					width: 66rpx;
					height: 66rpx;
					border-radius: 100%;

					.image-avatar {
						border-radius: 100%;
						width: 100%;
						height: 100%;
					}
				}

				.info-item {
					width: 28%;

					.info-item-name {
						padding-bottom: 12rpx;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.info-item-time {
						font-size: 24rpx;
						white-space: nowrap;
						color: #FFFFFF;
					}
				}

				.info-desc {
					width: 40%;
					margin-right: 18rpx;
					color: #FFFFFF;

					.reward-title {
						text-align: right;
						font-size: 26rpx;
					}

					.desc {
						margin-top: 12rpx;
						font-size: 20rpx;
						text-align: right;
					}
				}

				.reward-cover {
					width: 60rpx;
					height: 60rpx;

					.reward-mini-cover {
						width: 100%;
						height: 100%;
					}
					.reward-cover-balanch {
						width: 70rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
</style>
